<template>
    <div class="item-detail">
        <div class="detail-wrapper">
            <div class="img">
                <img :src="item.picUrl"/>
            </div>
            <div class="title-wrapper clearfix">
                {{item.title}}
            </div>
            <div class="goods-jq clearfix">
                <div class="goods-price fl"><b><i>￥</i>{{item.price}}</b>券后价</div>
                <div class="goods-quan shoufa-quan fl"><span>券</span><b><i>￥</i>{{couponTotalCount}}</b></div>
                <div class="goods-num fr"><i></i><b>{{item.saleQuantity}}</b> 人已买</div>
            </div>
        </div>

        <div class="tuwen-tkl">
            <div class="pic-detail">
                <div class="pic-detail-btn" @click="loadDetail">
                    <span class="pic-detail-btn-span">查看图文详情<i></i></span>
                </div>
                <div class="pic-detail-show" v-show="showDetail">
                    <p v-for="pic in detailPictures">
                        <img :src="pic"/>
                    </p>
                </div>
                <span class="loadding-lab" v-show="loading">加载中，请稍后……</span>
            </div>
        </div>
        <div class="buy-wrapper img" style="padding-right: 0;">
            <span class="price">券后价：<i>¥<b style="font-size:22px;">{{promoPrice}}</b></i></span>
            <a :href="item.couponUrl"
               class="buy-2he1 ui-link">领券购买&nbsp;&gt;</a>
            <a :href="item.couponUrl"
               class="quan-2he1 ui-link">
                优惠券<br><span style="font-size: 15px;color: #ffffff; ">50元</span>
            </a>

        </div>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                item          : {
                    id: null
                },
                detailPictures: [],
                showDetail    : false,
                loaded        : false,
                loading       : false
            }
        },
        created() {
            this.item.iid = this.$route.query.iid;
            if (this.item.iid) {
                this.$http.get('/api/goods/items/' + this.item.iid).then(rsp => {
                    this.item = rsp.data.data
                })
            }
        },
        methods : {
            loadDetail() {
                if (this.loading)
                    return;

                if (!this.loaded) {
                    this.loading = true;
                    this.jsonp('http://hws.m.taobao.com/cache/mtop.wdetail.getItemDescx/4.1', {
                        param: 'data={%22item_num_id%22:%22' + this.item.iid + '%22}&type=jsonp&callback'
                    }, (success, data) => {
                        let images = data.data.images;
                        for (let key of images) {
                            this.detailPictures.push(key);
                        }
                        this.showDetail = true;
                        this.loaded     = true;
                        this.loading    = false;
                    })
                } else {
                    this.showDetail = !this.showDetail;
                }
            }
        },
        computed: {
            couponTotalCount() {
                return this.item.couponTotalCount / 100;
            },
            promoPrice() {
                let price = this.item.price * 100 - this.item.couponTotalCount;
                return price / 100;
            }
        }
    }
</script>
<style rel="stylesheet/scss" lang="scss">
    .item-detail {
        .detail-wrapper {
            padding: 0 0 15px;
            background-color: #FFF;
            border-bottom: #e9e5e6 1px solid;
            overflow: hidden;
            position: relative;
            z-index: 100;
            .img {
                position: relative;
                margin: 0 auto 20px;
                width: 100%;
                img {
                    width: 100%;
                }
            }
            .title-wrapper {
                position: relative;
                font-size: 16px;
                width: 100%;
                overflow: hidden;
                color: #454545;
                line-height: 16px;
                padding: 0 15px;
                box-sizing: border-box;
            }
            .goods-jq {
                margin: 6px 15px 0;
                position: relative;
                height: 30px;
                .goods-price {
                    font-size: 12px;
                    color: #999;
                    margin-right: 20px;
                    b {
                        color: #fe0000;
                        margin-right: 7px;
                        font-size: 20px;
                        position: relative;
                        top: 2px;
                    }
                }
                .goods-quan {
                    margin-top: 7px;
                    &.shoufa-quan {
                        font-size: 10px;
                        height: 17px;
                        line-height: 17px;
                        position: relative;
                        text-indent: 4px;
                        color: white;
                        span {
                            position: absolute;
                            left: 0;
                            width: 19px;
                            text-indent: 5px;
                            height: 17px;
                            background: white url('~assets/static/img/icon.png') -205px -182px no-repeat;
                            background-size: 287px 800px;
                            line-height: 18px;
                        }
                        b {
                            height: 17px;
                            position: absolute;
                            left: 17px;
                            margin: 0;
                            font-size: 12px;
                            text-indent: 0;
                            text-align: center;
                            padding: 0 5px;
                            color: #ff6a00;
                            line-height: 16px;
                            border: #ff9950 1px solid;
                            font-weight: normal;
                        }
                    }
                }
                .goods-num {
                    color: #aaa;
                    font-size: 12px;
                    position: relative;
                    padding-left: 19px;
                    margin-top: 8px;
                    i {
                        width: 15px;
                        height: 12px;
                        position: absolute;
                        left: 0;
                        top: 2px;
                        background: url('~assets/style/img/goods_num.png') 0 0 no-repeat;
                        background-size: 100%;
                    }
                    b {
                        color: #ff6a00;
                        font-weight: normal;
                    }
                }
            }
        }
        .tuwen-tkl {
            background: #faf5f6;
            padding: 5px 0;
            .pic-detail {
                display: block;
                border-bottom: #e9e5e6 1px solid;
                width: 100%;
                background: white;
                text-align: center;
                overflow: hidden;
                .pic-detail-btn {
                    display: block;
                    margin: 0 auto 10px;
                    span.pic-detail-btn-span {
                        border: #ff6a00 1px solid;
                        color: #ff6a00;
                        border-radius: 16px;
                        margin: 12px auto;
                        width: 110px;
                        height: 25px;
                        display: block;
                        line-height: 25px;
                        font-size: 12px;
                    }
                }
                .pic-detail-show {
                    width: 100%;
                    margin-top: 10px;
                    /*display: none;*/
                    height: auto;
                    p {
                        margin: 0;
                        img {
                            width: 98%;
                            vertical-align: middle;
                        }
                    }

                }
                span.loadding-lab {
                    width: 100%;
                    float: left;
                    font-size: 12px;
                    margin-bottom: 10px;
                }
            }
        }
        .buy-wrapper {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 50px;
            padding: 0;
            line-height: 50px;
            box-shadow: 0 0 5px 0 rgba(218, 218, 218, 0.75);
            background-color: #FFF;
            font-size: 12px;
            overflow: hidden;
            z-index: 100;
            .price {
                color: #3E3E3E;
                padding-left: 10px;
                i {
                    color: #FF6600;
                    font-style: normal;
                }
            }
            .buy-2he1 {
                background-color: #fc3616;
                color: #ffffff;
                float: right;
                width: 120px;
                text-align: center;
                font-size: 16px;
            }
            .quan-2he1 {
                float: right;
                background: #f69919;
                line-height: 20px;
                text-align: center;
                color: #ffffff;
                font-size: 12px;
                width: 64px;
                height: 100px;
                padding-top: 4px;
            }
        }
    }
</style>